<!-- 滚动吸附效果演示 -->
<template>
	<view class="content">
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			style="height: calc(100% - 55px);" @scrolltolower="scrollToBottomFun">
			<!--客户基本信息-->
			<cstQuotedCard :item="infoObj" :isDetail="true"></cstQuotedCard>
			<!--tab-->
			<view class="uTabsView">
				<u-tabs :list="tabList" :is-scroll="true" duration="0.08" :current="tabIndex" :show-bar="false"
					font-size="32" @change="tabChange"></u-tabs>
			</view>
			<view class="contentView">
				<!--详细信息-->
				<view v-if="tabIndex == 0">
					<cstQuotedDetail :infoObj="infoObj"></cstQuotedDetail>
				</view>
				<!--产品信息-->
				<view v-if="tabIndex == 1">
					<view class="myCard" v-if="tabList[1].arr.length > 0">
						<view class="cardTopName">产品汇总</view>
						<view class="flexRow">
							<view>
								<view>总数量：</view>
								<view>{{cpHzObj.total_num}}</view>
							</view>
							<view>
								<view>价格合计：</view>
								<view>{{(cpHzObj.total_money).toFixed(2)}}元</view>
							</view>
						</view>
					</view>
					<view v-for="(item, index) in tabList[1].arr" :key="index">
						<salContractListCard :item="item"></salContractListCard>
					</view>
				</view>
				<!--跟进记录-->
				<view v-if="tabIndex == 2">
					<view v-for="(item, index) in tabList[2].arr" :key="index">
						<traceCard :item="item"></traceCard>
					</view>
				</view>
				<!--加载更多-->
				<getMore :isMore="tabList[tabIndex].isMore"></getMore>
			</view>
		</z-paging>
		<bottomBox :sheetList="sheetList" @pageGenjinFun="pageGenjinFun" @pageDeleteShowFun="pageDeleteShowFun"
			@pageBianjiFun="pageBianjiFun"></bottomBox>
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = '';
	import {
		apiQuoted,
		apiTrace
	} from '@/api/crm.js'
	import bottomBox from '@/components/bottomBox/bottomBox'
	import cstQuotedCard from '@/components/card/cstQuotedCard.vue'
	import cstQuotedDetail from '@/components/detail/cstQuotedDetail.vue'
	import salContractListCard from '@/components/card/salContractListCard.vue'
	import traceCard from '@/components/card/traceCard.vue'
	import finReceRecordCard from '@/components/card/finReceRecordCard.vue'
	import finInvoicePayCard from '@/components/card/finInvoicePayCard.vue'
	import getMore from '@/components/getMore/getMore.vue'
	export default {
		components: {
			bottomBox,
			cstQuotedCard,
			cstQuotedDetail,
			salContractListCard,
			traceCard,
			finReceRecordCard,
			finInvoicePayCard,
			getMore
		},
		data() {
			return {
				selectList: [],
				selectShow: false,
				infoObj: {},
				dataList: [

				],
				tabList: [{
						name: '详细信息',
						arr: [],
						pageNum: 1,
						isMore: false
					},
					{
						name: '产品详细',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					{
						name: '跟进记录',
						arr: [],
						pageNum: 1,
						isMore: true
					},
					// {
					// 	name: '回款记录',
					// 	arr: [],
					// 	pageNum: 1,
					// 	isMore: true
					// },
					// {
					// 	name: '开票记录',
					// 	arr: [],
					// 	pageNum: 1,
					// 	isMore: true
					// },
					// {
					// 	name: '操作记录',
					// 	isMore: false
					// }
				],
				sheetList: [{
						text: '更换负责人'
					},
					{
						text: '放入客户池'
					},
					{
						text: '删除'
					}
				],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: 0,
				isLoadSelectById: false
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index;
			if (e.fromDetail) {
				that.selectDetailByIdFun(e.id)
			} else {

				that.infoObj = uni.$cstQuotedInfo || {};
				let infoObj = that.infoObj;
				if (infoObj.cpList && infoObj.cpList.length > 0) {
					let cpItem = that.tabList[1];
					cpItem.arr = infoObj.cpList;
					cpItem.name += '(' + infoObj.cpList.length + ')';
					that.$set(that.tabList, 1, cpItem)
				}
			}
		},
		onShow() {
			if (that.isLoadSelectById) {
				that.selectDetailByIdFun();
			}
		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				let obj = this.infoObj;
				uni.$emit('updateHtListByIndex', {
					index: this.cardIndex,
					obj
				})
			}
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index;
				let item = that.tabList[index];
				if (item.arr && item.arr.length > 0) {
					return
				}
				if (index == 1) {
					that.getCpByIdFun()
				} else if (index == 2) {
					that.getGenJinFun()
				} else if (index == 3) {
					that.getHuiKuanDanFun()
				} else if (index == 4) {
					that.getInvoicePayFun()
				}
			},
			itemClick(item) {
				console.log('点击了', item.title);
			},
			scrollToBottomFun: function(e) {
				let index = that.tabIndex;
				let isMore = that.tabList[index].isMore;
				if (!isMore) {
					return
				}
				if (index == 1) {
					that.getCpByIdFun()
				} else if (index == 2) {
					that.getGenJinFun()
				} else if (index == 3) {
					that.getHuiKuanDanFun()
				} else if (index == 4) {
					that.getInvoicePayFun()
				}
			},
			// 获取跟进记录
			getGenJinFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list',
					params: {
						matchObj: {
							customer_id: that.infoObj.customer_id,
							bus_type: 'cst_quoted',
							bus_id: that.infoObj.id,
						},
						sortObj: {
							create_time: 'desc'
						},
						pageNum: item.pageNum
					}
				}
				apiTrace(reqData)
					.then(res => {
						that.setTabArrFun(res.data.data, item)
					})
			},
			// 给tabList中的arr赋值
			setTabArrFun: function(data, item) {
				if (item.pageNum == 1) {
					item.arr = [];
				}
				if (data.length >= 10) {
					item.pageNum += 1;
					item.isMore = true;
				} else {
					item.isMore = false;
				}
				item.arr = item.arr.concat(data);
				
				
				setTimeout(() => {
					uni.hideLoading()
				}, 100);
				that.$set(that.tabList, that.tabIndex, item)
				
			},
			// 新增跟进信息
			pageGenjinFun: function() {
				that.isLoadSelectById = true;
				uni.navigateTo({
					url: '../cst_trace/add?customer_name=' + that.infoObj.customer_name + '&customer_id=' + that.infoObj
						.customer_id + '&linkman_name=' + that.infoObj.linkman_name + '&linkman_id=' + that.infoObj
						.linkman_id + '&bus_type=cst_quoted' + '&bus_id=' + that.infoObj.id + '&bus_name=' +
						that.infoObj.quoted_no
				})
			},
			// 修改信息
			pageBianjiFun: function() {
				that.isLoadSelectById = true;
				uni.$infoObj = that.infoObj;
				uni.navigateTo({
					url: './add?type=update'
				})
			},
			// 删除信息
			pageDeleteShowFun: function(e) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除名称为：' + that.infoObj.name + '的报价单吗?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									req: {
										id: that.infoObj.id
									}
								}
							}
							apiSalContract(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 888,
										icon: 'none'
									})
									uni.$emit('deleteCardFun', {
										index: that.cardIndex
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 666)
								})
						}
					}
				})
			},
			// 根据id查询
			selectDetailByIdFun: function(_id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_detail',
					params: {
						req:{
							id: ''
						}
					}
				}
				if (_id) {
					reqData.params.req.id = _id;
				} else {
					reqData.params.req.id = that.infoObj.id;
				}
				apiQuoted(reqData)
					.then(res => {
						if (res.code == 1) {
							that.infoObj = res.data
							uni.$cstQuotedInfo=res.data;
							setTimeout(() => {
								uni.hideLoading()
							}, 888);
							
						} else {
							uni.showModal({
								title: '提示',
								content: '相关内容不存在，或者已被删除！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}
					})
			},
			// 根据id查询产品列表
			getCpByIdFun: function() {
				let item = that.tabList[that.tabIndex];
				let reqData = {
					action: 'get_list_detail',
					params: {
						matchObj:{
							quoted_id: that.infoObj.id
						},
						sortObj:{},
						pageNum: item.pageNum
					}
				}
				apiQuoted(reqData)
					.then(res => {
						let data = res.data.data;
						let cpHzObj = {
							total_money: 0,
							total_num: 0
						};
						for (var i = 0; i < data.length; i++) {
							var obj = data[i];
							// obj.discount = (obj.sellingPrice / obj.price * 100).toFixed(2);
							 //obj.totalPrice = (obj.sellingPrice * obj.num).toFixed(2);
							// data[i] = obj;
							
							cpHzObj.total_money += parseFloat(obj.sale_price) * obj.num;
							cpHzObj.total_num += obj.num;
						}
						
						that.cpHzObj = cpHzObj;
						let item = that.tabList[that.tabIndex];
						item.arr = data;
						item.isMore = false;
						that.$set(that.tabList, that.tabIndex, item)
					})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}

	.uTabsView {
		border-bottom: 1rpx solid #DDDDDD;
		z-index: 100;
		position: sticky;
		top: 0;
	}

	.contentView {
		/* background-color: #FFFFFF; */
		min-height: calc(100vh - 45px);
	}

	.flexRow {
		display: flex;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}

	.flexRow>view {
		width: 50%;
		display: flex;
	}

	.flexRow>view>text:first-child {
		width: 166rpx;
	}

	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}

	.uTabsView {
		top: -2px !important;
	}
</style>
